<template>
	<view class="steps" :class="[`steps--${direction}`]">
		<slot></slot>
	</view>
</template>

<script>
	export default {
		name: 'steps',
		props: {
			current: {
				type: Number,
				default: 0
			},
			direction: {
				type: String,
				default: 'row'
			},
			activeColor: {
				type: String,
				default: '#2979ff'
			},
			inactiveColor: {
				type: String,
				default: '#c0c4cc'
			},
			activeIcon: {
				type: String,
				default: ''
			},
			inactiveIcon: {
				type: String,
				default: ''
			},
			dot: {
				type: Boolean,
				default: false
			}
		},
		watch: {
			children() {
				this.updateChildData()
			},
			parentData() {
				this.updateChildData()
			}
		},
		computed: {
			parentData() {
				return [this.current, this.direction, this.activeColor, this.inactiveColor, this.activeIcon, this
					.inactiveIcon, this.dot
				]
			}
		},
		methods: {
			updateChildData() {
				this.children.map(child => {
					child && child.updateFromParent && child.updateFromParent()
				})
			},
			updateFromChild() {
				this.updateChildData()
			}
		},
		created() {
			this.children = []
		}
	}
</script>

<style scoped>
	.steps {
		display: flex;
	}

	.steps--column {
		flex-direction: column
	}

	.steps--row {
		flex-direction: row;
		flex: 1;
	}
</style>